<template>
  <div>
    <el-dialog
      :visible="addDialog"
      width="30%"
      :before-close="closeDialog"
      top="15vh"
      :close-on-click-modal="false"
    >
      <div class="dialogTitle" slot="title">
        {{ this.form.id ? "编辑作业中断时长" : "新增作业中断时长" }}
      </div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="作业级别:">
          <el-select v-model="form.riskLevelId" placeholder="请选择状态">
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时长(分钟):">
          <el-input-number
            v-model="form.duration"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!form.id" class="addBtn" type="primary" @click="submit"
          >确定新增</el-button
        >
        <el-button v-else class="addBtn" type="primary" @click="submit"
          >确定修改</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addWorkInterruptionDurationApi,
  updateWorkInterruptionDurationApi,
  riskLevelListApi,
} from "@/api/workConfiguration";

export default {
  name: "addProblem",
  props: {
    addDialog: {
      type: Boolean,
      default: false,
    },
    workId: {
      type: String,
      default: "",
    },
  },
  components: {},
  data() {
    return {
      form: {
        riskLevelId: "",
        duration: "",
        unit: "分钟",
      },
      options1: [],
    };
  },
  created() {},
  methods: {
    async submit() {
      if (this.form.name == "") {
        this.$message.warning("请填写完整信息");
        return;
      }
      if (this.form.id) {
        const res = await updateWorkInterruptionDurationApi({
          id: this.form.id,
          riskLevelId: this.form.riskLevelId,
          duration: this.form.duration,
          ticketTypeCode: this.workId,
        });

        if (res.code == 0) {
          this.$message.success("修改成功");
          this.closeDialog();
          this.$parent.workInterruptionDurationListApiGet();
        } else {
          this.$message.error("修改失败");
        }
      } else {
        const res = await addWorkInterruptionDurationApi({
          riskLevelId: this.form.riskLevelId,
          duration: this.form.duration,
          ticketTypeCode: this.workId,
        });

        if (res.code == 0) {
          this.$message.success("新增成功");
          this.closeDialog();
          this.$parent.workInterruptionDurationListApiGet();
        } else {
          this.$message.error("新增失败");
        }
      }
    },
    closeDialog() {
      this.form = {
        riskLevelId: "",
        duration: "",
   
      };
      this.$parent.workInterruptionDurationListApiGet();

      this.$emit("close"); // 触发父组件更新
    },
    async riskLevelListApiGet() {
      const res = await riskLevelListApi({
        ticketTypeCode: this.workId,
      });
      this.options1 = res.data;
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.dialogTitle {
  position: relative;
  padding-left: 10px; /* 调整文本与颜色条之间的间距 */
  font-weight: bold;
}
.dialogTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 2px;
  transform: translateY(-50%);
  width: 4px; /* 颜色条的宽度 */
  height: 14px; /* 颜色条的高度 */
  background-color: #0077ff; /* 颜色条的颜色 */
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog__body {
  padding-right: 50px !important;
}
::v-deep .dialog-footer {
  text-align: center;
  .addBtn {
    background: #0077ff;
    border-radius: 4px 4px 4px 4px;
    border: none;
    color: #fff;
  }
}
</style>
